<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>派车单管理</title>
	<meta name="decorator" content="ani"/>
	<style>
		#searchresult
		{
			width: 260px;
			position: absolute;
			z-index: 1;
			overflow: hidden;
			left: 140px;
			top: 71px;
			background: #E0E0E0;
			border-top: none;

		}
		#searchresult1
		{
			width: 260px;
			position: absolute;
			z-index: 1;
			overflow: hidden;
			left: 140px;
			top: 71px;
			background: #E0E0E0;
			border-top: none;

		}
		#searchresult2
		{
			width: 260px;
			position: absolute;
			z-index: 1;
			overflow: hidden;
			left: 140px;
			top: 71px;
			background: #E0E0E0;
			border-top: none;

		}
		#searchresult3
		{
			width: 260px;
			position: absolute;
			z-index: 1;
			overflow: hidden;
			left: 140px;
			top: 71px;
			background: #E0E0E0;
			border-top: none;

		}

		.line
		{
			font-size: 15px;
			background: #E0E0E0;
			width: 140px;
			padding:0px;
		}
		.hover
		{
			background: #007ab8;
			width: 140px;
			color: #fff;
		}
		.std
		{
			width: 150px;
		}
	</style>
	<script type="text/javascript">
		var validateForm;
		var $table; // 父页面table表格id
		var $topIndex;//弹出窗口的 index
		function doSubmit(table, index){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
		  if(validateForm.form()){
			  $table = table;
			  $topIndex = index;
			  jp.loading();
			  $("#inputForm").submit();
			  return true;
		  }

		  return false;
		}

		$(document).ready(function() {
			validateForm = $("#inputForm").validate({
				submitHandler: function(form){
					jp.post("${ctx}/tms/dispatching/save",$('#inputForm').serialize(),function(data){
						if(data.success){
	                    	$table.bootstrapTable('refresh');
	                    	jp.success(data.msg);
	                    	jp.close($topIndex);//关闭dialog

	                    }else{
            	  			jp.error(data.msg);
	                    }
					})
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
		});
        function se(evt) {
            ChangeCoords(); //控制查询结果div坐标
            var k = window.event ? evt.keyCode : evt.which;
            //输入框的id为txt_search，这里监听输入框的keyup事件
            //不为空 && 不为上箭头或下箭头或回车
            if ($("#cys").val() != "" && k == 13) {
                $.ajax({
                    type: 'post',
                    async: true, //同步执行，不然会有问题
                    dataType: "json",
                    url: "${ctx}/infor/carrier/getCarrierByName?name="+$("#cys").val(),
                    //提交的页面/方法
                    error: function (msg) {//请求失败处理函数
                        jp.error("数据加载失败");
                    },
                    success: function (data) { //请求成功后处理函数。
						/*  var objData = eval("(" + data.userName + ")");   */
                        console.log(data);
                        if (data.length > 0) {
                            var layer = "";
                            layer = "<table id='aa'>";
                            $.each(data, function (idx, item) {
                                layer += "<tr class='line' id='"+item.id+"'><td class='std'>" + item.name+ "</td></tr>";
                            });
                            layer += "</table>";
                            //将结果添加到div中
                            $("#searchresult").empty();
                            $("#searchresult").append(layer);
                            $(".line:first").addClass("hover");
                            $("#searchresult").css("display", "");
                            //鼠标移动事件

                            $(".line").hover(function () {
                                $(".line").removeClass("hover");
                                $(this).addClass("hover");
                            }, function () {
                                $(this).removeClass("hover");
                                //$("#searchresult").css("display", "none");
                            });
                            //鼠标点击事件
                            $(".line").click(function () {
                                $("#cys").val($(this).text());
                                tc($(this).attr("id"));
                                $("#searchresult").css("display", "none");
                            });
                        } else {
                            $("#searchresult").empty();
                            $("#searchresult").css("display", "none");
                        }
                    }
                });
            }
            else if (k == 38) {//上箭头
                $('#aa tr.hover').prev().addClass("hover");
                $('#aa tr.hover').next().removeClass("hover");
                $('#cys').val($('#aa tr.hover').text());
            }
            else if (k == 40) {//下箭头
                $('#aa tr.hover').next().addClass("hover");
                $('#aa tr.hover').prev().removeClass("hover");
                $('#cys').val($('#aa tr.hover').text());
            }

            else {
                $("#searchresult").empty();
                $("#searchresult").css("display", "none");
            }
        };
        function ChangeCoords() {
            //    var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型
            //    var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
            var left = $("#cys").position().left; //获取距离最左端的距离，像素，整型
            var top = $("#cys").position().top + 30; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
            $("#searchresult").css("left", left + "px"); //重新定义CSS属性
            $("#searchresult").css("top", top + "px"); //同上
        }
        $("#searchresult").bind("mouseleave", function () {
            $("#searchresult").empty();
            $("#searchresult").css("display", "none");
        });
        function tc(id) {
            $.ajax({
                url:'${ctx}/infor/carrier/carriers?i='+id,
                success:function (data) {
                    $("#cyslxr").val(data.person);
                    $("#cysdh").val(data.phone);

                },
                error:function (data) {
                    jp.error("失败了");

                }
            })

        }

        function em(evt) {
            ChangeCoords1(); //控制查询结果div坐标
            var k = window.event ? evt.keyCode : evt.which;
            //输入框的id为txt_search，这里监听输入框的keyup事件
            //不为空 && 不为上箭头或下箭头或回车
            if ($("#plateNumber").val() != "" && k == 13) {
                $.ajax({
                    type: 'post',
                    async: true, //同步执行，不然会有问题
                    dataType: "json",
                    url: "${ctx}/infor/truck/getTruckName?name="+$("#plateNumber").val(),
                    //提交的页面/方法
                    error: function (msg) {//请求失败处理函数
                        jp.error("数据加载失败");
                    },
                    success: function (data) { //请求成功后处理函数。
						/*  var objData = eval("(" + data.userName + ")");   */
                        console.log(data);
                        if (data.length > 0) {
                            var layer = "";
                            layer = "<table id='aa1'>";
                            $.each(data, function (idx, item) {
                                layer += "<tr class='line1' id='"+item.id+"'><td class='std1'>" + item.truckNumber+ "</td></tr>";
                            });
                            layer += "</table>";
                            //将结果添加到div中
                            $("#searchresult1").empty();
                            $("#searchresult1").append(layer);
                            $(".line1:first").addClass("hover");
                            $("#searchresult1").css("display", "");
                            //鼠标移动事件

                            $(".line1").hover(function () {
                                $(".line1").removeClass("hover");
                                $(this).addClass("hover");
                            }, function () {
                                $(this).removeClass("hover");
                                //$("#searchresult").css("display", "none");
                            });
                            //鼠标点击事件
                            $(".line1").click(function () {
                                $("#plateNumber").val($(this).text());
                                t($(this).attr("id"));
                                $("#searchresult1").css("display", "none");
                            });
                        } else {
                            $("#searchresult1").empty();
                            $("#searchresult1").css("display", "none");
                        }
                    }
                });
            }
            else if (k == 38) {//上箭头
                $('#aa1 tr.hover').prev().addClass("hover");
                $('#aa1 tr.hover').next().removeClass("hover");
                $('#plateNumber').val($('#aa1 tr.hover').text());
            }
            else if (k == 40) {//下箭头
                $('#aa1 tr.hover').next().addClass("hover");
                $('#aa1 tr.hover').prev().removeClass("hover");
                $('#plateNumber').val($('#aa1 tr.hover').text());
            }

            else {
                $("#searchresult1").empty();
                $("#searchresult1").css("display", "none");
            }
        };
        $("#searchresult1").bind("mouseleave", function () {
            $("#searchresult1").empty();
            $("#searchresult1").css("display", "none");
        });
        function t(id) {
            $.ajax({
                url:'${ctx}/infor/truck/getTruckNumber?i='+id,
                success:function (data) {
                    $("#xszh").val(data.license);
                    $("#cllx").val(data.remarks);


                },
                error:function (data) {
                    jp.error("失败了");

                }
            })

        }
        function ChangeCoords1() {
            //    var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型
            //    var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
            var left = $("#plateNumber").position().left; //获取距离最左端的距离，像素，整型
            var top = $("#plateNumber").position().top + 30; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
            $("#searchresult1").css("left", left + "px"); //重新定义CSS属性
            $("#searchresult1").css("top", top + "px"); //同上
        }
        function mm(evt) {
            ChangeCoords2(); //控制查询结果div坐标
            var k = window.event ? evt.keyCode : evt.which;
            //输入框的id为txt_search，这里监听输入框的keyup事件
            //不为空 && 不为上箭头或下箭头或回车
            if ($("#driverName").val() != "" && k == 13) {
                $.ajax({
                    type: 'post',
                    async: true, //同步执行，不然会有问题
                    dataType: "json",
                    url: "${ctx}/infor/driver/getDriver?name="+$("#driverName").val(),
                    //提交的页面/方法
                    error: function (msg) {//请求失败处理函数
                        jp.error("数据加载失败");
                    },
                    success: function (data) { //请求成功后处理函数。
						/*  var objData = eval("(" + data.userName + ")");   */
                        console.log(data);
                        if (data.length > 0) {
                            var layer = "";
                            layer = "<table id='aa2'>";
                            $.each(data, function (idx, item) {
                                layer += "<tr class='line2' id='"+item.id+"'><td class='std2'>" + item.name+ "</td></tr>";
                            });
                            layer += "</table>";
                            //将结果添加到div中
                            $("#searchresult2").empty();
                            $("#searchresult2").append(layer);
                            $(".line2:first").addClass("hover");
                            $("#searchresult2").css("display", "");
                            //鼠标移动事件

                            $(".line2").hover(function () {
                                $(".line2").removeClass("hover");
                                $(this).addClass("hover");
                            }, function () {
                                $(this).removeClass("hover");
                                //$("#searchresult").css("display", "none");
                            });
                            //鼠标点击事件
                            $(".line2").click(function () {
                                $("#driverName").val($(this).text());
                                tm($(this).attr("id"));
                                $("#searchresult2").css("display", "none");
                            });
                        } else {
                            $("#searchresult2").empty();
                            $("#searchresult2").css("display", "none");
                        }
                    }
                });
            }
            else if (k == 38) {//上箭头
                $('#aa2 tr.hover').prev().addClass("hover");
                $('#aa2 tr.hover').next().removeClass("hover");
                $('#driverName').val($('#aa2 tr.hover').text());
            }
            else if (k == 40) {//下箭头
                $('#aa2 tr.hover').next().addClass("hover");
                $('#aa2 tr.hover').prev().removeClass("hover");
                $('#driverName').val($('#aa2 tr.hover').text());
            }
            else if (k == 13) {//回车
                $('#driverName').val($('#aa2 tr.hover').text());
                tm($('#aa2 tr.hover').attr("id"));
                $("#searchresult2").empty();
                $("#searchresult2").css("display", "none");
            }
            else {
                $("#searchresult2").empty();
                $("#searchresult2").css("display", "none");
            }
        };
        $("#searchresult2").bind("mouseleave", function () {
            $("#searchresult2").empty();
            $("#searchresult2").css("display", "none");
        });
        function tm(id) {
            $.ajax({
                url:'${ctx}/infor/driver/getById?i='+id,
                success:function (data) {
                    $("#sjdh").val(data.phone);
                    $("#jszh").val(data.license);


                },
                error:function (data) {
                    jp.error("失败了");

                }
            })

        }
        function ChangeCoords2() {
            //    var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型
            //    var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
            var left = $("#driverName").position().left; //获取距离最左端的距离，像素，整型
            var top = $("#driverName").position().top + 30; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
            $("#searchresult2").css("left", left + "px"); //重新定义CSS属性
            $("#searchresult2").css("top", top + "px"); //同上
        }
	</script>
</head>
<body class="bg-white">
		<form:form id="inputForm" modelAttribute="dispatching" class="form-horizontal">
		<form:hidden path="id"/>
			<form:hidden path="jhl"/>
		<sys:message content="${message}"/>	
		<table class="table table-bordered">
		   <tbody>
		   <tr>
			   <td class="width-15 active"><label class="pull-right">绩效吨位区间：</label></td>
			   <td class="width-35">
				   <form:input path="jxdwqj" htmlEscape="false"    class="form-control "/>
			   </td>
			   <td class="width-15 active"><label class="pull-right">派车单号：</label></td>
			   <td class="width-35">
				   <form:input path="pcdh" htmlEscape="false"    class="form-control "/>
			   </td>
		   </tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">调度人员：</label></td>
					<td class="width-35">
						<sys:gridselect url="${ctx}/infor/staff/data" id="ddry" name="ddry.id" value="${dispatching.ddry.id}" labelName="ddry.name" labelValue="${dispatching.ddry.name}"
										title="选择人员名称" cssClass="form-control required" fieldLabels="名称" fieldKeys="name" searchLabels="名称" searchKeys="name" ></sys:gridselect>
					</td>
					<td class="width-15 active"><label class="pull-right">现场督导：</label></td>
					<td class="width-35">
						<sys:gridselect url="${ctx}/infor/staff/data" id="xxdd" name="xxdd.id" value="${dispatching.xxdd.id}" labelName="xxdd.name" labelValue="${dispatching.xxdd.name}"
										title="选择人员名称" cssClass="form-control required" fieldLabels="名称" fieldKeys="name" searchLabels="名称" searchKeys="name" ></sys:gridselect>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">托运类型：</label></td>
					<td class="width-35">
						<form:input path="tylx" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">承运商：</label></td>
					<td class="width-35">
						<input id="cys"  onkeyup="se(event)"  autocomplete="off"  name="cys"    htmlEscape="false"    class="form-control required"/>
						<div id="searchresult" style="display: none;"></div>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">承运商联系人：</label></td>
					<td class="width-35">
						<form:input path="cyslxr" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">承运商电话：</label></td>
					<td class="width-35">
						<form:input path="cysdh" htmlEscape="false"    class="form-control "/>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">车牌号：</label></td>
					<td class="width-35">
						<input id="plateNumber" name="cph"  autocomplete="off"  onkeyup="em(event)"  htmlEscape="false"    class="form-control required"/>
						<div id="searchresult1" style="display: none;"></div>

					</td>
					<td class="width-15 active"><label class="pull-right">车辆类型：</label></td>
					<td class="width-35">
						<form:input path="cllx" htmlEscape="false"    class="form-control "/>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">行驶证号：</label></td>
					<td class="width-35">
						<form:input path="xszh" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">司机姓名：</label></td>
					<td class="width-35">
						<input id="driverName"  name="sjxm"   autocomplete="off"  htmlEscape="false"   onkeyup="mm(event)"  class="form-control required"/>
						<div id="searchresult2" style="display: none;"></div>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">司机电话：</label></td>
					<td class="width-35">
						<form:input path="sjdh" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">驾驶证号：</label></td>
					<td class="width-35">
						<form:input path="jszh" htmlEscape="false"    class="form-control "/>
					</td>
				</tr>
		 	</tbody>
		</table>
			<table class="table table-bordered">
				<thead>
				<tr>
					<th>计划状态</th>
					<th>委托单号</th>
					<th>装运单号</th>
					<th>提货单号</th>
					<th>物料编码</th>
					<th>物料名称</th>
					<th>收货单位</th>
					<th>计划量</th>
					<th>已派车量</th>
					<th>派车量</th>
				</tr>
				</thead>
				<tbody>
				<c:forEach items="${list}" var="p">
					<tr>
						<td>${p.jhstatus}</td>
						<td>${p.wtdh}</td>
						<td>${p.zydh}</td>
						<td>${p.thdh}</td>
						<td>${p.code}</td>
						<td>${p.name.name}</td>
						<td>${p.shdw}</td>
						<td>${p.gross}</td>
						<td>${p.pcl}</td>
						<td><input name="${p.id}" value="${p.gross-p.pcl}"/></td>

					</tr>
				</c:forEach>
				</tbody>
			</table>
	</form:form>
</body>
</html>